﻿<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Forms</title>
     <link rel="stylesheet" href="css/StyleSheet.css"/>

</head>
<body>
    <form>
        <h1>HTML5 Forms: New Input Types</h1>
        <ul>
            <li>
                <label for="search">Search:</label>
                <input type="search" id="search" name="search" >
            </li>
            <li>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required autofocus>
            </li>
            <li>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required multiple>
            </li>
            <li>
                <label for="phone">Phone:</label>
                <input type="tel" id="phone" name="phone" required placeholder="(555) 555-5555">
            </li>
            <li>
                <label for="help">Help:</label>
                <input type="checkbox" value="yes" id="help">
            </li>
            <li>
                <label for="url">Website:</label>
                <input type="url" id="url" name="url" placeholder="http://www.microsoft.com" list="urls">
                <datalist id="urls">
                    <option value="http://www.site1.com" />
                    <option value="http://www.site2.com" />
                    <option value="http://www.site3.com" />
               </datalist>
            </li>
            <li>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required pattern="\S{6,}">
            </li>
            <li>
                <label for="rating">Rating:</label>
                <input min="1" max="10" id="rating" name="rating" type="range">
            </li>
            <li>
                <label for="startdate">Date:</label>
                <input type="date" id="startdate" name="startdate" min="2012-01-01" max="2012-01-31" required>
            </li>
            <li>
                <label for="quantity">Quantity:</label>
                <input type="number" name="quantity" id="quantity" min="1" max="10" value="1">
            </li>
            <li>
                <label for="color">Color:</label>
                <input id="color" name="color" type="color">
            </li>
        </ul>
        <input type="submit" id="submit" value="Send" />
    </form>

    <form novalidate>
        <ul>
            <li>
                <label for="lastname">Last Name:</label>
                <input type="text" id="lastname" name="lastname" value="Juan Perez" disabled>
            </li>
        </ul>
        <input type="submit" id="submit1" value="Send" />
    </form>
</body>
</html>
